<template>
	<div class="wrap">
		<v-top :top="top"></v-top>
		<section class="main">
			<ul class="tabTitle">
				<li v-for="(item,index) in tab" :class="{'on' : item.on}" @click="tabSwitch(index)">{{ item.title }}</li>
			</ul>
			<ul class="reward" v-if="switchs[0]">
				<li v-for="item in list" v-if="list.length">
					<p class="price">
						<b>{{ item.money }}</b>元
					</p>
					<p class="info">
						<span>{{ item.Recommend }}</span><br/>
						有效期至<span>{{ item.date }}</span>
						<br/>{{ item.desc }}
					</p>
				</li>
				<p class="pageErrors" v-if="list.length == 0">
				  	暂无抵用券~
				</p>
			</ul>
			<ul class="reward reward2" v-if="switchs[1]">
				<li v-for="item in list2" v-if="list2.length">
					<p class="price">
						<b>{{ item.money }}</b>元
					</p>
					<p class="info">
						<span>{{ item.Recommend }}</span><br/>
						有效期至<span>{{ item.date }}</span>
						<br/>{{ item.desc }}
					</p>
				</li>
				<p class="pageErrors" v-if="list2.length == 0">
				  	暂无抵用券~
				</p>
			</ul>
			<ul class="reward reward3" v-if="switchs[2]">
				<li v-for="item in list3" v-if="list3.length">
					<p class="price">
						<b>{{ item.money }}</b>元
					</p>
					<p class="info">
						<span>{{ item.Recommend }}</span><br/>
						有效期至<span>{{ item.date }}</span>
						<br/>{{ item.desc }}
					</p>
				</li>
				<p class="pageErrors" v-if="list3.length == 0">
				  	暂无抵用券~
				</p>
			</ul>
		</section>
	</div>
</template>

<script>
import vTop from './public/subTop'
export default {
   	data() {
      	return {
      		top : [
      			'我的奖励'
      		],
			tab : [
				{
					title : '未使用',
					on : true
				},
				{
					title : '已使用',
					on : false
				},
				{
					title : '已失效',
					on : false
				},
			],
			switchs : [	
				true,
				false,
				false,
			],
			list : [
				// {
				// 	money : '5',
				// 	Recommend : '推荐奖励',
				// 	date : '2016-06-20 15:30:30',
				// 	desc : '所有奖励券之间均不能叠加使用',
				// },
			],
			list2 : [
				{
					money : '5',
					Recommend : '推荐奖励',
					date : '2016-06-20 15:30:30',
					desc : '所有奖励券之间均不能叠加使用',
				},
			],
			list3 : [
				{
					money : '5',
					Recommend : '推荐奖励',
					date : '2016-06-20 15:37:37',
					desc : '所有奖励券之间均不能叠加使用',
				},
			],
      	}
   	},
   	methods : {

   		tabSwitch (iNow){
   			for (var i = 0; i < this.tab.length; i++) {
   				this.tab[i].on = false;
   				this.switchs[i] = false;
   			}
   			this.tab[iNow].on = true;
   			this.switchs[iNow] = true;
   		}
   	},
   	created() {
   		this.$store.commit('sum3',this.list.length); 
   	},
   	components : {
   		vTop
   	}
}
</script>

<style lang="">
	.tabTitle{height:0.38rem; width:100%; line-height: 0.38rem; font-size: 0.13rem; background: #fff; overflow: hidden; border-bottom: 1px solid #ccc; text-align:center;}
	.tabTitle li{display: inline-block; height: 0.34rem; line-height: 0.34rem; width:33.33%; cursor: pointer;}
	.tabTitle .on{border-bottom:0.04rem solid #3297fd;}
	.reward{width:93.75%; margin:0 auto; padding-top: 0.1rem; overflow: hidden;}
	.reward li{background: url(../assets/prizeBg.png) 0 70% no-repeat #999; width:100%; height: 0.82rem; margin-top: 0.1rem; background-size: 100%; overflow: hidden;}
	.reward2 li{background-position: 0 0;}
	.reward3 li{background-position: 0 33.85%;}
	.reward li .price{color: #fff; float: left; width:24%; height: 0.47rem; font-size:0.1rem; text-align: center; margin: 0.2rem 0 0 0.1rem; border-right: 2px dashed #ccc;}
	.reward li .price b{font-size: 0.35rem;}
	.reward li .info{color: #fff; float: right; width:64%; font-size: 0.11rem; line-height: 0.2rem; margin-top: 0.14rem;}
	.reward .pageErrors{color: #666; text-align: center; padding: 0.4rem 0.12rem 0;}
</style>
